﻿@using Kugar.MVC.MobileUI.WeUI.Demo.Models.Home
@using Kugar.MVC.MobileUI.WeUI.Helpers

@model Kugar.MVC.MobileUI.WeUI.Demo.Models.Home.Model_List

@{
    ViewBag.Title = "NavBar";
    this.Layout = WebUI.DefaultLayoutPath;
}

@using (var bar = WebUI.CommonCtrl().TabBar()
    .AddItem(x => x.Active(true).NavToPageID("listview").Title("ListView").Badge(5))
    .AddItem(x => x.NavToPageID("gridview").Title("GridView").Badge(66))
    .Render()
    )
{
    using (bar.RenderPage("listview")
        .EnablePullToRefresh("onRefresh(e);")
        .EnableLoadingMore("onloadmore(e);")
        .Render())
    {
        @(WebUI.CommonCtrl().Swiper().Images(new[] {"https://www.wikihow.com/images_en/thumb/9/97/Insert-Spaces-in-HTML-Step-1.jpg/v4-728px-Insert-Spaces-in-HTML-Step-1.jpg.webp",
                            "https://www.wikihow.com/images_en/thumb/9/97/Insert-Spaces-in-HTML-Step-1.jpg/v4-728px-Insert-Spaces-in-HTML-Step-1.jpg.webp" }).Render())

        <div class="instest" style="height: 20px;width: 100%"></div>
        using (var lst = WebUI.CommonCtrl().ListView<SSSS>()
             .Data(Model.List)
             .Render())
        {
            @lst.AddMediaBoxTemplate().Icon(x => x.Icon).Title(x => x.Title).Desc(x => x.Desc).Badge(x => "1").Link(x => x.Url)
        }
    }
    using (bar.RenderPage("gridview").Render())
    {
        using (var lst2 = WebUI.CommonCtrl().ListView<SSSS>()
             .Data(Model.List)
             .Render())
        {
            @lst2.AddGridBox().Icon(x => x.Icon).Title(@<div>@item.Title</div>).Href(x => x.Url)
        }

    }
}


@section Scripts{
    <script>
        function showModal(url) {
            WebUIJS.ModalByUrl(url,
                null,
                function () {
                    console.log("ssss");
                },
                function () {
                    console.log("close");
                });
        }

        function showMsgPage(url) {
            WebUIJS.ShowMsgPageByUrl(url,
                null,
                function () {
                    console.log("111");
                },
                function () {
                    console.log("close2");
                });
        }

        function onRefresh(e) {
            console.log("refressh end");
            //$(e).pullToRefreshDone();

            e.LoadComplete();
        }

        function onloadmore(e) {
            e.LoadComplete();
            console.log("load completed");
        }

        $(document).ready(function () {
            //WebUIJS.ScrollSpy($("#listview"),
            //    $(".instest"),
            //    function(e) {
            //        console.log(e);
            //    });

            //var obj = $(".instest").infinite();
            //obj.on("infinite",
            //    function(e) {
            //        console.log(e);
            //    });
        });
    </script>
}

